<template>
	<view class="life_content">
		<!-- 命主信息 -->
		<view class="home_userInfo">
			<view class="flex_row_between_center home_userInfo_title">
				<view class="home_userInfo_title_l">命主信息</view>
			</view>
			<view class="home_userInfo_desc">
				<view class="flex_row_start_center">
					<view class="home_userInfo_item flex_row_start_center" style="margin-right: 70rpx;">
						<view>姓名：</view>
						<view>{{userInfo.name}}</view>
					</view>
					<view class="home_userInfo_item flex_row_start_center">
						<view>性别：</view>
						<view>{{userInfo.gender}}</view>
					</view>
				</view>
				<view class="home_userInfo_item flex_row_start_center">
					<view>出生时辰：</view>
					<view>{{userInfo.isLeap==''?  '公历':'阴历'}}{{userInfo.year}}年{{userInfo.month}}月{{userInfo.day}}日{{userInfo.hour}}：{{userInfo.minute}}</view>
				</view>
				<view class="home_userInfo_item flex_row_start_center">
					<view>出生地点：</view>
					<view>{{userInfo.selectAddress}}</view>
				</view>
			</view>
		</view>
		<!-- 乾造信息 -->
		<view class="horoscope_info">
			<view class="flex_row_between_center horoscope_info_title">乾造信息</view>
			<view>
				<view class="horoscope_info_date flex_row_start_center">
					<view v-for="(item,index) in dateList" :key="index" class="flex_row_center_center">{{item}}</view>
				</view>
				<view class="horoscope_info_branch flex_row_start_center"  v-for="(item,index) in datalist" :key="index">
					<view class="horoscope_info_branch_l flex_row_center_center">{{item.title}}</view>
					<view class="horoscope_info_branch_r flex_row_start_center" :class="index==1 ? 'branch':''">
						<view v-if="Object.prototype.toString.call(item.child.num1) === '[object Array]'" >
						    <view v-for="(value,idx) in item.child.num1" :key="idx" class="branch_item">{{value}}</view>
						</view>
						<view v-else>{{ item.child.num1}}</view>
						<view v-if="Object.prototype.toString.call(item.child.num2) === '[object Array]'" >
						    <view v-for="(value,idx) in item.child.num2" :key="idx" class="branch_item">{{value}}</view>
						</view>
						<view v-else>{{ item.child.num2}}</view>
						<view v-if="Object.prototype.toString.call(item.child.num3) === '[object Array]'" >
						    <view v-for="(value,idx) in item.child.num3" :key="idx" class="branch_item">{{value}}</view>
						</view>
						<view v-else>{{ item.child.num3}}</view>
						<view v-if="Object.prototype.toString.call(item.child.num4) === '[object Array]'" >
						    <view v-for="(value,idx) in item.child.num4" :key="idx" class="branch_item">{{value}}</view>
						</view>
						<view v-else>{{ item.child.num4}}</view>
					
					</view>
				</view>
				<!-- <view class="horoscope_info_attribute flex_row_start_center">
					<view class="horoscope_info_attribute_l">属性</view>
					<view class="horoscope_info_attribute_r">
						0层金；3层木；1层水；2层火；2层土
					</view>
				</view> -->
			</view>
		</view>
	
	    <!-- 八字解析 -->
		<view class="analysis_info">
			<view class="analysis_info_title">八字解析</view>
			<view  class="info_nav flex_row_start_center" >
				<view v-for="(item, index) in navList"
						:key="index"
						class="nav-item"
						:class="{ current: tabCurrentIndex === index }"
						@click="tabClick(index)">{{item.text}}</view>
			</view>
			<swiper
			  :current="tabCurrentIndex"
			  class="swiper-box"
			  duration="300"
			  @change="changeTab"
			  :disable-touch="disTouch"
			>
			  <swiper-item
			    class="tab-content"
			    v-for="(tabItem, tabIndex) in navList"
			    :key="tabIndex"
			  >
			    <scroll-view
			      scroll-y
			      @scrolltolower="loadData"
			    >
					<view v-if="tabItem.state==0">
						<view>{{calculationInfo.xingGe}}</view>
					</view>
					<view v-if="tabItem.state==1">
						<view>{{calculationInfo.jianKang}}</view>
					</view>
					<view v-if="tabItem.state==2">
						<view>{{calculationInfo.shiYe}}</view>
					</view>
					<view v-if="tabItem.state==3">
						<view>{{calculationInfo.baZiInfo.daYunLu}}</view>
					</view>
					
			    </scroll-view>
			  </swiper-item>
			</swiper>
		</view>
		<!-- <view class="flex_row_center_center">
			<view class="life_b">找大师1v1专业指导</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dateList:['年柱','月柱','日柱','时柱'],
				date2List:['天干','地支','天干十神','地支十神','藏干',],
				datalist:[
					{
						title:'天干',
						child:{
							num1:'',
							num2:'',
							num3:'',
							num4:'',
						}
					},
					{
						title:'地支',
						child:{
							num1:'',
							num2:'',
							num3:'',
							num4:'',
						}
					},
					{
						title:'天干十神',
						child:{
							num1:'',
							num2:'',
							num3:'',
							num4:'',
						}
					},
					{
						title:'地支十神',
						child:{
							num1:'',
							num2:'',
							num3:'',
							num4:'',
						}
					},
					{
						title:'藏干',
						child:{
							num1:'',
							num2:'',
							num3:'',
							num4:'',
						}
					},
				],
				navList: [{
						state: 0,
						text: '性格',
						balanceList: [],
					},
					{
						state: 1,
						text: '健康',
						balanceList: [],
					},
					{
						state: 2,
						text: '事业',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 3,
						text: '财运',
						balanceList: [],
					},
					{
						state: 4,
						text: '婚姻',
						balanceList: [],
					},
				],
				tabCurrentIndex:0,
				userInfo:{},
				calculationInfo:'',//测算结果
			}
		},
		onLoad(options){
			if ('params' in options) {
			      let obj = JSON.parse(decodeURIComponent(options.params));
				  console.log(obj);
				  this.userInfo=obj
				  
				  if(obj.isLeap==''){
					  this.getFortune(obj)
				  }else if(obj.isLeap=='true' ||obj.isLeap=='false'){
					  this.getFortune2(obj)
				  }
			 }
		},
			
		methods:{
			//
			getFortune(value){
				uni.showLoading({
					title: '加载中'
				})
				let param = {};
				param.urls='scbz/convertedCalendar'
				param.data=value
				param.header={
					'Content-Type': 'application/json;charset=utf-8',
					
				},
				this.$request(param).then(res=>{
					console.log(res);
					uni.hideLoading();
					this.calculationInfo=res
					this.datalist[4].child.num1=res.cangGan.nianGan
					this.datalist[4].child.num2=res.cangGan.yueGan
					this.datalist[4].child.num3=res.cangGan.riGan
					this.datalist[4].child.num4=res.cangGan.shiGan
					
					this.datalist[3].child.num1=res.shiShen.nianShen_DiZhi
					this.datalist[3].child.num2=res.shiShen.yueShen_DiZhi
					this.datalist[3].child.num3=res.shiShen.riShen_DiZhi
					this.datalist[3].child.num4=res.shiShen.shiShen_DiZhi
					
					this.datalist[2].child.num1=res.shiShen.nianShen
					this.datalist[2].child.num2=res.shiShen.yueShen
					this.datalist[2].child.num3=res.shiShen.riShen
					this.datalist[2].child.num4=res.shiShen.shiShen
					
					this.datalist[1].child.num1=res.baZiWuXing.nianZhu.diZhi.diZhi
					this.datalist[1].child.num2=res.baZiWuXing.yueZhu.diZhi.diZhi
					this.datalist[1].child.num3=res.baZiWuXing.riZhu.diZhi.diZhi
					this.datalist[1].child.num4=res.baZiWuXing.shiZhu.diZhi.diZhi
					
					this.datalist[0].child.num1=res.baZiWuXing.nianZhu.tianGan.tianGan
					this.datalist[0].child.num2=res.baZiWuXing.yueZhu.tianGan.tianGan
					this.datalist[0].child.num3=res.baZiWuXing.riZhu.tianGan.tianGan
					this.datalist[0].child.num4=res.baZiWuXing.shiZhu.tianGan.tianGan
				})
			},
			getFortune2(value){
				uni.showLoading({
					title: '加载中'
				})
				let param = {};
				param.urls='scbz/convertedSolarCalendar'
				param.data=value
				param.header={
					'Content-Type': 'application/json;charset=utf-8',
					
				},
				this.$request(param).then(res=>{
					console.log(res);
					uni.hideLoading();
					this.calculationInfo=res
					this.datalist[4].child.num1=res.cangGan.nianGan
					this.datalist[4].child.num2=res.cangGan.yueGan
					this.datalist[4].child.num3=res.cangGan.riGan
					this.datalist[4].child.num4=res.cangGan.shiGan
					
					this.datalist[3].child.num1=res.shiShen.nianShen_DiZhi
					this.datalist[3].child.num2=res.shiShen.yueShen_DiZhi
					this.datalist[3].child.num3=res.shiShen.riShen_DiZhi
					this.datalist[3].child.num4=res.shiShen.shiShen_DiZhi
					
					this.datalist[2].child.num1=res.shiShen.nianShen
					this.datalist[2].child.num2=res.shiShen.yueShen
					this.datalist[2].child.num3=res.shiShen.riShen
					this.datalist[2].child.num4=res.shiShen.shiShen
					
					this.datalist[1].child.num1=res.baZiWuXing.nianZhu.diZhi.diZhi
					this.datalist[1].child.num2=res.baZiWuXing.yueZhu.diZhi.diZhi
					this.datalist[1].child.num3=res.baZiWuXing.riZhu.diZhi.diZhi
					this.datalist[1].child.num4=res.baZiWuXing.shiZhu.diZhi.diZhi
					
					this.datalist[0].child.num1=res.baZiWuXing.nianZhu.tianGan.tianGan
					this.datalist[0].child.num2=res.baZiWuXing.yueZhu.tianGan.tianGan
					this.datalist[0].child.num3=res.baZiWuXing.riZhu.tianGan.tianGan
					this.datalist[0].child.num4=res.baZiWuXing.shiZhu.tianGan.tianGan
				})
			},
			tabClick(index){
				this.tabCurrentIndex=index
			},
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				// this.loadData('tabChange');
			},
		}
	}
</script>

<style lang="scss">
	/*命主信息 start  */
	.home_userInfo{
		background-color: #fff;
		padding: 15rpx 44rpx 16rpx 44rpx;
		position: relative;
		
		.home_userInfo_title{
			color: #9B9B9B;
			font-size: 28rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:12px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
				
			}
			.home_userInfo_title_l{
				color: #4C4C4C;
				font-size: 28rpx;
			}
		}
		
		.home_userInfo_desc{
			.home_userInfo_item{
				margin-top: 30rpx;
				color: #4C4C4C;
				font-size: 28rpx;
				& view:first-child{
					margin-right: 25rpx;
				}
			}
		}
	}
	/*命主信息 end  */
	
	/*乾造信息 start  */
	.horoscope_info{
		margin-top: 8rpx;
		background-color: #fff;
		padding: 15rpx 44rpx 16rpx 44rpx;
		position: relative;
		
		.horoscope_info_title{
			color: #4C4C4C;
			font-size: 28rpx;
			margin-bottom: 35rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:12px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
				
			}
		}
		
		
		.horoscope_info_date{
			padding-left: 112rpx;
			& view{
				width: 132rpx;
				height: 36rpx;
				font-size: 28rpx;
				color: #4C4C4C;
			}
		}
		.horoscope_info_branch{
			font-size: 26rpx;
			color: #4C4C4C;
			
			.horoscope_info_branch_l{
				width: 104rpx;
				margin-right: 8rpx;
				padding: 14rpx 0;
				
			}
			.horoscope_info_branch_r{
				font-size: 28rpx;
				// background-color:yellow;
				& view{
					width: 132rpx;
					text-align: center;
					
				}
				.branch_item{
					width: 132rpx;
					padding: 5rpx 0;
					text-align: center;
					// display: block;
				}
				
			}
			.branch{
				color: #9B4C3A;
			}
			
		}
		
		.horoscope_info_attribute{
			margin-top: 20rpx;
			.horoscope_info_attribute_l{
				width: 104rpx;
				margin-right: 8rpx;
				padding: 14rpx 0;
				text-align: center;
				font-size: 28rpx;
			}
			.horoscope_info_attribute_r{
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
	/*乾造信息 end  */
	
	/*八字解析 start  */
	.analysis_info{
		margin-top: 8rpx;
		background-color: #fff;
		padding: 15rpx 44rpx 16rpx 44rpx;
		position: relative;
	     .analysis_info_title{
			color: #4C4C4C;
			font-size: 28rpx;
			margin-bottom: 35rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:12px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
				
			}
		}
		
	}
	.info_nav{
		padding: 20rpx 36rpx;
		color: #8C8C8C;
		font-size: 32rpx;
		background-color: #fff;
		.nav-item{
			margin-right: 48rpx;
			
			&:last-child{
				margin-right: 0;
			}
			&.current {
			  color: #A76252;
			  font-size: 32rpx;
			  position: relative;
			  
			  &::after{
				content: '';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom: -18rpx;
				height: 6rpx;
				width: 20px;
				background-color:#A76252;
			  }
			}
			
		}
	}
	.swiper-box{
		min-height: 600rpx;
		.tab-content{
			height: 100%;
		}
	}
	/*八字解析 end  */
	.life_b{
		position: fixed;
		bottom: 20rpx;
		  width: 572rpx;
		  height: 88rpx;
		  line-height: 88rpx;
		  text-align: center;
		  color: #fff;
		  font-size: 32rpx;
		  border-radius: 46rpx;
		  background: #9e4035;
	}
	.life_content{
		padding-bottom: 100rpx;
	}
</style>